
<template>
  <div class="wrap" style="padding: 15px">
    <el-row>
      <el-form :inline="true" :model="queryParams" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input
            clearable
            v-model="queryParams.orderNumber"
            placeholder="订单号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input
            clearable
            v-model="queryParams.phone"
            placeholder="手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="date"
            type="daterange"
            range-separator="至"
            value-format="yyyy-MM-dd"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select
            clearable
            v-model="queryParams.orderStatus"
            placeholder="订单状态"
          >
            <el-option label="待支付" value="2"></el-option>
            <el-option label="支付完成" value="1"></el-option>
            <el-option label="退款" value="4"></el-option>
            <el-option label="取消" value="3"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="支付方式">
          <el-select
            clearable
            v-model="queryParams.payType"
            placeholder="支付方式"
          >
            <el-option label="支付宝" value="1"></el-option>
            <el-option label="微信" value="2"></el-option>
            <el-option label="银联" value="3"></el-option>
            <el-option label="余额" value="4"></el-option>
            <el-option label="现金" value="5"></el-option>
            <el-option label="礼品卡" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>

    <el-table :data="tableData" style="width: 100%" stripe v-loading="loading">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="订单号" prop="orderNumber"></el-table-column>
      <el-table-column label="会员名" prop="memberName"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="订单金额" prop="orderAmount"></el-table-column>
      <el-table-column label="购买张数" prop="cardCount"></el-table-column>
      <el-table-column label="支付时间" prop="payTime"></el-table-column>
      <el-table-column label="支付方式" prop="payType">
        <template slot-scope="scope">
          {{ setPayTypeTxt(scope.row.payType) }}
        </template>
      </el-table-column>
      <el-table-column label="订单状态" prop="orderStatus">
        <template slot-scope="scope">
          {{ setOrderStatusTxt(scope.row.orderStatus) }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="show(scope.row.id)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="text-align: right">
      <el-pagination
        @size-change="getData"
        @current-change="getData"
        :current-page.sync="queryParams.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size.sync="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <Detail ref="detail" />
  </div>
</template>
<script>
import Detail from './detail.vue'
import { cardOrder, rechargeConfirm } from '@/config/api'
import { times, divide } from "@/utils/tools"

export default {
  components: {
    Detail
  },
  data () {
    return {
      date: [],
      queryParams: {
        startTimeStr: undefined,
        endTimeStr: undefined,
        orderNumber: undefined,
        orderStatus: undefined,
        payType: undefined,
        phone: undefined,
        page: 1,
        pageSize: 10,
      },
      tableData: [

      ],
      total: 0,
      loading: false,

    };
  },

  created () {
    this.getData()
  },
  methods: {
    getDate (e) {
      if (e) {
        this.queryParams.startTimeStr = e[0]
        this.queryParams.endTimeStr = e[1]
      } else {
        this.queryParams.startTimeStr = ""
        this.queryParams.endTimeStr = ""
      }
    },
    // 新增
    show (id) {
      this.$refs.detail.show(id)
    },
    getData () {
      cardOrder(this.queryParams).then(res => {
        res.data.result.list.map(item => {
          item.orderAmount = divide(item.orderAmount, 100)
        })
        this.tableData = res.data.result.list
        this.total = res.data.result.total
      })
    },
    // 获取支付方式文字
    setPayTypeTxt (payType) {
      let str = ""
      switch (payType) {
        case "1":
          str = "支付宝"
          break;
        case "2":
          str = "微信"
          break;
        case "3":
          str = "银联"
          break;
        case "4":
          str = "余额"
          break;
        case "5":
          str = "现金"
          break;
        case "7":
          str = "礼品卡"
          break;
      }
      return str;
    },
    // 获取订单状态文案
    setOrderStatusTxt (orderStatus) {
      let str = ""
      switch (orderStatus) {
        case "1":
          str = "已完成"
          break;
        case "2":
          str = "待支付"
          break;
        case "3":
          str = "取消支付"
          break;
        case "4":
          str = "退款"
          break;
      }
      return str;
    },
    confirmOrder (record) {
      this.$confirm('此操作将认该订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        rechargeConfirm({ rechargeNumber: record.rechargeNumber }).then(res => {
          if (res.data.status == 200) {
            this.getData()
            this.$message({
              type: 'success',
              message: '确认成功!'
            });
          }

        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    search () {
      this.queryParams.page = 1
      this.getData()
    }
  },
};
</script>
